<template>
    <div class="wrap">
        <el-form>
            <el-form-item>
                <el-input :style="{ width: '50%' }" v-model="searchValue" placeholder="请搜索您想要的产品"></el-input>
                <!-- 搜索 -->
                <el-button type="primary" @click="onsearchit" class="searchit">
                    <el-icon>
                        <Search />
                    </el-icon>
                    查询
                </el-button>
                <!-- 重置 -->
                <el-button type="warning" @click="reset">
                    <el-icon>
                        <Refresh />
                    </el-icon>
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <el-table :data="tabelDataCom" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"
                :index="(this.currentPage - 1) * this.pageSize + 1"></el-table-column>
            <el-table-column class-name="pro-name" prop="goods_name" label="名称" width="300"></el-table-column>
            <el-table-column sortable prop="goods_price" label="原价" width="180">
                <!-- sortable是el-table-column中的排序小属性 -->
            </el-table-column>
            <el-table-column sortable prop="goods_id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="goods_number" label="数量" width="180"></el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot:default="xxx">
                    <!-- <el-button @click="delPro(xxx.row)">删除</el-button> -->
                    <el-popconfirm width="220" confirm-button-text="确定删除" cancel-button-text="不用了，谢谢" :icon="InfoFilled"
                        icon-color="#626AEF" title="确定删除这个商品吗?" @confirm="delPro(xxx.row)">
                        <template #reference>
                            <el-button>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="currentPage" />
    </div>
</template>

<script>
import { proList, removeProList } from '@/api/goods.js'
import { defineComponent } from 'vue';
import { Refresh, Search } from "@element-plus/icons-vue";
export default defineComponent({
    components: {
        Refresh,
        Search
    },
    data() {
        return {
            list: [],
            total: 511,
            pageSize: 10,
            page: 1,
            currentPage: 1,
            //输入的内容
            searchValue: ''
        }
    },
    mounted() {

        this.getProList()
    },
    computed: {
        tabelDataCom() {
            return this.list.slice(
                (this.currentPage - 1) * 10,
                (this.currentPage - 1) * 10 + 10
            );
        },
    },
    methods: {
        getProList() {
            proList({ pagenum: this.page, pagesize: this.total }).then(res => {

                this.list = res.data.data.goods;
                // console.log(this.list)
                // 更新总数
                this.total = res.data.data.total;
            })
        },
        //删除商品数据
        delPro(proItem) {
            removeProList({ id: proItem.goods_id }).then((res) => {
                // console.log(res);
                if (res.status == '200') {
                    this.getProList();
                }

            });

        },
        //搜索
        onsearchit() {

            this.list = this.list.filter(item => {
                return item.goods_name.includes(this.searchValue)
            })
            // this.pageSize = this.list.length
            // console.log(this.list.length)
        },
        //重置
        reset() {
            this.searchValue = ''
            this.getProList()
        }
    }
})
</script>

<style scoped lang="scss">
.wrap {
    margin-top: 10px;

    .el-form-item {
        margin-left: 200px;
    }

    .searchit {
        margin-left: 10px;
    }
}
</style>